Skip to content

PMM-15180 Replace local custom SVG icons with peak-ui and MUI components - #5731

Open
pmcf-percona wants to merge 4 commits into
mainfrom
PMM-15180-replace-local-icons
Open

PMM-15180 Replace local custom SVG icons with peak-ui and MUI components#5731
pmcf-percona wants to merge 4 commits into
mainfrom
PMM-15180-replace-local-icons

Conversation

@pmcf-percona

@pmcf-percona pmcf-percona commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Ticket number: PMM-15180

Feature build: Percona-Lab/pmm-submodules#4509

Summary

PMM kept its own copies of ~50 brand and UI icons as local SVGs in src/icons/, wired through a local Icon component and DYNAMIC_ICON_IMPORT_MAP. Most duplicated icons the design system or Material already provide. This PR sources them properly instead.

The design system was renamed from @percona/percona-ui to @percona/peak-ui, so this also adopts @percona/peak-ui@1.0.25 (the first release carrying the custom Peak Design icon suite) and repoints every existing import.

Also in this PR:

  • 7 brand icons move to @percona/peak-ui components (PerconaIcon, HaproxyIcon, ProxyIcon, PerconaMyIcon/MoIcon/PoIcon/VaIcon), and the RTA empty state uses RealTimeDatabaseOffIllustration from the design system in place of a local 192px SVG.
  • 24 standard glyphs move to @mui/icons-material across the sidebar, theme toggle, app bar, release notes and RTA controls.
  • 14 custom glyphs move to new Peak Design components.
  • Removes three unreferenced icons (collapse-content, expand-content, bottom-panel-open) and the dead node map alias.
  • The release-notes percona marker is now a theme-aware monochrome icon instead of a fixed orange–gold gradient, matching the other markers.

How to test

In both light and dark themes, scan the left sidebar (MySQL/MongoDB/PostgreSQL/Valkey, OS, HAProxy/ProxySQL, Dashboards, Explore, Alerts, Advisors, Inventory, Backups, Configuration, Users and access, Account, Help, theme toggle) plus the app-bar logo and support icon. Then check the Help Center "PMM docs" card, the Updates → release-notes icons, and Real-Time Analysis (overview play/pause/refresh/export, the auto-refresh bolt, the details-pane collapse button, and the empty-state illustration).

No API changes.

Related work:

  • percona/percona-ui#50 — adds the 14 custom Peak Design icons this PR consumes; shipped in @percona/peak-ui@1.0.25.

Testing screenshots:

iconsdarkfull

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

The PMM UI dependency changes from @percona/percona-ui to @percona/peak-ui. Shared imports and legacy icon usages are updated across navigation, alerting, realtime analysis, help center, settings, and release notes.

Changes

Peak UI migration

Layer / File(s) Summary
Package and component import migration
ui/apps/pmm/package.json, ui/apps/pmm/src/**, ui/apps/pmm/vitest.config.ts
The dependency, shared UI imports, theme imports, forms, dialogs, tables, code blocks, test wrapper, and Vitest inline dependency use @percona/peak-ui.
Icon registry reduction
ui/apps/pmm/src/components/icon/Icon.constants.ts
The dynamic icon and viewbox registries retain PMM, status, emergency, and chat icons.
Navigation and shared icon updates
ui/apps/pmm/src/components/app-bar/AppBar.tsx, ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx, ui/apps/pmm/src/contexts/navigation/*
Navigation entries, theme toggles, support links, and high-availability icons use MUI or Peak UI components instead of string identifiers or legacy icons.
Page-level icon replacements
ui/apps/pmm/src/pages/help-center/**, ui/apps/pmm/src/pages/rta/**, ui/apps/pmm/src/pages/updates/change-log/release-notes/*
Dedicated icons and illustrations replace generic icon usage in help center, realtime analysis, empty-state, and release-notes components.
Alerting details-pane icon updates
ui/apps/pmm/src/pages/alerting/status/**
Alerting components use Peak UI imports and dedicated details-pane open and close icons.

Possibly related PRs

  • percona/pmm#5732: Also migrates PMM UI imports and dependencies from @percona/percona-ui to @percona/peak-ui.
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly summarizes the replacement of local SVG icons with Peak UI and MUI components.
Description check ✅ Passed The description includes the ticket, feature build, scope, testing steps, related work, screenshots, and confirms that no API changes exist.

Comment @coderabbitai help to get the list of available commands.

@pmcf-percona pmcf-percona changed the title Replace custom SVG icons with Material-UI and Peak UI components PMM-15180 Replace local custom SVG icons with peak-ui and MUI components Aug 4, 2026
@pmcf-percona
pmcf-percona marked this pull request as ready for review August 4, 2026 15:07
@pmcf-percona
pmcf-percona requested a review from a team as a code owner August 4, 2026 15:07
@pmcf-percona
pmcf-percona requested review from fabio-silva and mattiasimonato and removed request for a team August 4, 2026 15:07
Replace PMM's bundled SVG icons with design-system and Material
components and adopt the @percona/percona-ui -> @percona/peak-ui rename
(@percona/peak-ui@1.0.25).

- 7 brand icons + 14 custom glyphs -> @percona/peak-ui components
- 24 standard glyphs -> @mui/icons-material
- RTA empty state -> RealTimeDatabaseOffIllustration
- remove 3 unreferenced icons + the dead `node` map alias
- src/icons/ trimmed to the status icons and PMM logos, kept by design

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GvaaWAnYeGgjBFDcrFv9Jx
@pmcf-percona
pmcf-percona force-pushed the PMM-15180-replace-local-icons branch from 3904830 to ee4420a Compare August 4, 2026 15:25
@coderabbitai coderabbitai Bot mentioned this pull request Aug 4, 2026
@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants